.Button {
  cursor: pointer;

  display: flex;
  align-items: center;

  padding: 6px 16px;

  color: var(--text-redesigned);

  &:hover {
    color: var(--accent-redesigned);

    .addonLeft svg,
    .addonRight svg {
      color: var(--accent-redesigned);
    }
  }
}

.clear {
  padding: 0;
  background: none;
  border: none;
  outline: none;
}

.outline {
  background: none;
  border-radius: 34px;

  &:hover {
    border: 2px solid var(--accent-redesigned);
  }

  &.normal {
    border: 2px solid var(--icon-redesigned);
  }

  &.error {
    border: 2px solid var(--cancel-redesigned);
  }

  &.success {
    border: 2px solid var(--save-redesigned);
  }
}

.filled {
  background: var(--light-bg-redesigned);
  border: none;
  border-radius: 34px;
  outline: none;
}

.square {
  padding: 0;
}

.square.size_m {
  width: var(--font-line-m);
  height: var(--font-line-m);
  font: var(--font-m);
}

.square.size_l {
  width: var(--font-line-l);
  height: var(--font-line-l);
  font: var(--font-l);
}

.square.size_xl {
  width: var(--font-line-xl);
  height: var(--font-line-xl);
  font: var(--font-xl);
}

.size_m {
  font: var(--font-m-redesigned);
}

.size_l {
  font: var(--font-l-redesigned);
}

.size_xl {
  font: var(--font-xl-redesigned);
}

.disabled {
  opacity: 0.5;
}

.fullWidth {
  width: 100%;
}

.addonLeft,
.addonRight {
  display: flex;
}

.withAddon {
  padding: 0 16px;
}
